<template>
	<div class="register-body">
		<div class="body-container">
			<div class="card-box">
				<h2 class="title">应用注册</h2>
				<a-steps progress-dot :current="current">
					<a-step v-for="item in data.steps" :key="item.title" :description="item.title" />
				</a-steps>
				<div class="steps-content">
					<zh-form :model="registerForm.form" :rules="registerFormRules" ref="registerFormRef">
						<div v-if="current === 0" class="steps-size">
							<zh-form-input prop="appName" label="应用名称" placeholder="请输入应用全称" v-model="registerForm.form.appName" :span="24" />
							<zh-form-select prop="appType" label="应用类型" placeholder="请选择" v-model="registerForm.form.appType" :options="data.dict.appTypeDict" style="text-align: left" :span="24" />
							<zh-form-select prop="appBuilderLevel" label="建设层级" placeholder="请选择" v-model="registerForm.form.appBuilderLevel" :options="data.dict.appBuilderLevelDict" style="text-align: left" :span="24" />
							<zh-form-input prop="appProjName" label="所属项目" placeholder="请输入所属项目名称" v-model="registerForm.form.appProjName" :span="24" />
              <zh-form-input prop="exhibitUrl" label="ip白名单"  placeholder="调用应用ip地址，多个用英文逗号隔开" v-model="registerForm.form.exhibitUrl" :span="24" />

              <zh-form-item prop="appStatus" label="应用状态" style="" :span="24">
								<el-radio-group v-model="registerForm.form.appStatus" v-for="item in data.dict.appStatusDict" :key="item">
									<el-radio style="padding: 6px" :label="item.dictKey">{{ item.dictValue }}</el-radio>
								</el-radio-group>
							</zh-form-item>
						</div>
						<div v-if="current === 1" class="steps-size">
							<zh-form-input prop="builderName" label="申请单位" placeholder="请输入申请单位" v-model="registerForm.form.builderName" :disabled="data.editFlag" :span="24" />
							<zh-form-input prop="appBuilderManager" label="单位联系人" placeholder="请输入应用单位联系人姓名" v-model="registerForm.form.appBuilderManager" :span="24" />
							<zh-form-input prop="appBuilderPhone" label="联系电话" placeholder="请输入应用负责人电话" v-model="registerForm.form.appBuilderPhone" :span="24" />
							<!-- <zh-form-input prop="appBuilderEmail" label="邮箱" placeholder="请输入常用邮箱" v-model="registerForm.form.appBuilderEmail" :span="24" /> -->
							<zh-form-input prop="appDesc" label="应用描述" placeholder="请输入应用描述" show-word-limit v-model="registerForm.form.appDesc" type="textarea" maxlength="500" @input="descInput" :rows="3" :span="24" />
						</div>
						<!-- <div v-if="current === 2" class="steps-size">
              <zh-form-input prop="builderName" label="开发商名称" placeholder="请输入开发商名称" v-model="registerForm.form.builderName" :disabled="data.editFlag" :span="24" />
              <zh-form-input prop="appDesc" label="开发联系人" placeholder="请输入开发商联系人姓名" show-word-limit v-model="registerForm.form.appDesc" type="textarea" maxlength="500" @input="descInput" :rows="2" :span="24" />
              <zh-form-input prop="appBuilderManager" label="联系人电话" placeholder="请输入联系人电话" v-model="registerForm.form.appBuilderManager" :span="24" />
              <zh-form-input prop="appBuilderPhone" label="联系电话" placeholder="请输入应用负责人电话" v-model="registerForm.form.appBuilderPhone" :span="24" />
            </div> -->
						<div v-if="current === 2" class="steps-size">
							<zh-form-upload
								prop="appAppendixList"
								label="附件"
								ref="uploadRef"
								type="file"
								fileTypes="docx"
								:limit="1"
								limitDesc="上传文件类型仅限docx"
								drag
								multiple
								v-model:file-list="registerForm.form.appAppendixList"
								@before-upload="beforeUpload"
								@on-change="onUpload"
								:span="24"
							/>
						</div>
					</zh-form>
				</div>
				<div class="steps-action">
					<zh-button v-if="current === 2" style="margin-left: 8px" @click="templateDownload">附件模板下载</zh-button>
					<zh-button v-if="current > 0" style="margin-left: 8px" @click="prev">上一步</zh-button>
					<zh-button v-if="current < data.steps.length - 1" button-type="save" type="primary" @click="next" icon="" :form-ref="registerFormRef">下一步</zh-button>
					<zh-button v-if="current == data.steps.length - 1" :formRef="registerFormRef" buttonType="save" icon="" @click="save"> 提交 </zh-button>
				</div>
			</div>
		</div>
		<!-- 模板下载提示 -->
		<el-dialog v-model="data.dialogVisible" title="温馨提示" width="30%" draggable>
			<!-- <el-icon :size="22" color="#FF6C37"><ele-WarningFilled /></el-icon> -->
			<span>是否已下载《应用注册附件模板》?</span>
			<template #footer>
				<span class="dialog-footer">
					<el-button @click="templateDownload">现在下载</el-button>
					<el-button type="primary" @click="data.dialogVisible = false">我已下载</el-button>
					<div class="show-size">
						<el-checkbox v-model="data.hasTips" label="不再提示" size="large" @change="handleCheckChange" />
					</div>
				</span>
			</template>
		</el-dialog>

		<!-- 背景动态小方块 -->
		<div class="square">
			<ul>
				<li v-for="item in 5" :key="item"></li>
			</ul>
		</div>
		<div class="circle">
			<ul>
				<li v-for="item in 5" :key="item"></li>
			</ul>
		</div>
	</div>
</template>

<script lang="ts" setup name="appRegister">
import { reactive } from 'vue';
import validate from '@/utils/validate';
import type { FormRules } from 'element-plus';
import router from '@/router';
import { ElMessageBox } from 'element-plus';

// ------------------接收传入数据-------------------------
const route = useRoute();
const info: any = route.query;

// ------------------初始化---------------------------
onMounted(() => {
	initHasTips();
	getOrgInfo();
	getDict();
	getNotPassInfo();
});
// ------------------变量区---------------------------
// 表单信息
let registerForm = reactive({
	form: {
		busiType: '0' as string,
		appName: '' as string,
		builderName: null as any,
		orgIdBuilder: '' as any,
		appDesc: '' as string,
		appBuilderManager: '' as string,
		appBuilderPhone: '' as string,
		appBuilderEmail: '' as string,
		appAppendixName: '' as string,
		appAppendixList: [] as Array<string>,
		appAppendixListTemp: [] as Array<any>,
		appAppendixShowId: '' as string,
		appStatus: '0' as string,
		appBuilderLevel: null as any,
		appType: null as any,
		appProjName: '' as string,
    exhibitUrl: '' as string,
	},
});
// 表单实例
const registerFormRef = ref<any>();
// 手机号码合法性验证
let checkPhone = (rule: any, value: any, callback: any) => {
	validate.isPhone(value) ? callback() : callback(new Error('输入的手机号码不正确'));
};
// 邮箱合法性验证
let checkEmail = (rule: any, value: any, callback: any) => {
	if (value) {
		validate.isEmail(value) ? callback() : callback(new Error('输入的邮箱不正确'));
	} else {
		callback();
	}
};

// 表单校验规则
const registerFormRules = reactive<FormRules>({
	appName: [
		{ required: true, message: '应用名称不能为空', trigger: 'blur' },
		{ min: 1, max: 16, message: '名称字数应保持在1至16之间', trigger: 'blur' },
	],
	appType: [{ required: true, message: '应用类型不能为空', trigger: 'blur' }],
	appStatus: [{ required: true, message: '应用状态不能为空', trigger: 'blur' }],
	appProjName: [{ required: true, message: '所属项目不能为空', trigger: 'blur' }],
  exhibitUrl: [{ required: true, message: '调用应用白名单IP不能为空', trigger: 'change' }],
	appDesc: [{ required: true, message: '应用描述不能为空', trigger: 'change' }],
	appBuilderPhone: [
		{ required: true, message: '联系电话不能为空', trigger: 'change' },
		{ validator: checkPhone, trigger: 'blur' },
	],
	appBuilderEmail: [{ validator: checkEmail, trigger: 'blur' }],
});

let remnant = ref(0) as any;

const data = reactive({
	//应用信息
	appDictData: {
		appStatus: [] as Array<any>,
	},
	// 数据字典对象
	dict: {
		// 应用状态字典
		appStatusDict: [] as Array<any>,
		// 应用建设层级字典
		appBuilderLevelDict: [] as Array<any>,
		// 应用领域字典
		appFieldDict: [] as Array<any>,
		// 应用类型字典
		appTypeDict: [] as Array<any>,
	},
	steps: [
		{
			title: '应用要素',
		},
		{
			title: '建设信息',
		},
		// {
		//   title: '开发信息',
		// },
		{
			title: '注册完成',
		},
	],
	// 可编辑标记
	editFlag: false,
	// 模板下载提示弹框显示标记
	dialogVisible: true as boolean,
	// 不在弹框复选框初始值
	hasTips: true as boolean,
});
const current = ref<number>(0);
// ------------------方法区---------------------------
const initHasTips = () => {
	if (getCookieValue('hasTips') == 'true') {
		data.dialogVisible = true;
		data.hasTips = false;
	} else {
		data.dialogVisible = false;
		data.hasTips = true;
	}
};
// 附件模板下载
const templateDownload = () => {
	let params = {
		templateId: '999',
	};
	$api.common.send.post('fileTemplate0002', params).then((res: any) => {
		window.open(res.result.templateAddress);
	});
	data.dialogVisible = false;
};
// “不在提示”复选框回调函数
const handleCheckChange = (value: string[]) => {
	let hasTipsStr = '';
	value ? (hasTipsStr = 'false') : (hasTipsStr = 'true');
	//设置cookie
	document.cookie = 'hasTips=' + hasTipsStr;
};
//获取指定cookie
const getCookieValue = (name: string) => {
	const nameString = name + '=';
	const value = document.cookie.split(';').filter((item) => {
		return item.includes(nameString);
	});
	if (value.length) {
		return value[0].substring(nameString.length, value[0].length);
	} else {
		return '';
	}
};
// 获取当前用户
const next = () => {
	current.value++;
};
const prev = () => {
	current.value--;
};
const descInput = () => {
	if (registerForm.form.appDesc) {
		let textVal = registerForm.form.appDesc.length;
		remnant.value = textVal;
	}
};
// 获取当前单位信息
const getOrgInfo = () => {
	let params = {
		orgId: '' as any,
	};
	params.orgId = $store.user.orgId;
	$api.common.send.post('dict0015', params).then((res: any) => {
		registerForm.form.builderName = res.result;
		registerForm.form.orgIdBuilder = $store.user.orgId;
		data.editFlag = true;
	});
};
// 文件上传的回调
const onUpload = (uploadFiles: any) => {
	registerForm.form.appAppendixListTemp.push({
		showId: uploadFiles[uploadFiles.length - 1].showId,
		name: uploadFiles[uploadFiles.length - 1].name,
	});
};
// 文件上传类型控制
const beforeUpload = (rawFile: any) => {
	console.log('____________rawFile = ', rawFile);
};
// 保存表单信息
const save = () => {
	let tempShowId = '' as string;
	let tempName = '' as string;

	for (const item of registerForm.form.appAppendixListTemp) {
		tempShowId = tempShowId + item.showId + ',';
		tempName = tempName + item.name + ',';
	}
	registerForm.form.appAppendixShowId = tempShowId.substring(0, tempShowId.lastIndexOf(','));
	registerForm.form.appAppendixName = tempName.substring(0, tempName.lastIndexOf(','));

	let params: any = registerForm.form;
	params.authStatus = 0;
	$api.common.send.post('appInfo0010', params).then(() => {
		// 重置表单数据
		registerFormRef.value.resetFields();

		ElMessageBox.alert('提交成功', '提示', {
			confirmButtonText: '好的',
			callback: () => {
				router.push({ path: '/appManage/appLog' });
			},
		});
	});
};
// 查询数据字典信息
const getDict = () => {
	let params = {
		dictFields: 'APPSTATUS,APPBUILDERLEVEL,APPTYPE,APPFIELD',
	};
	$api.common.getBatchDict.post(params).then((res: any) => {
		data.dict.appStatusDict = res.result.APPSTATUS;
		data.dict.appBuilderLevelDict = res.result.APPBUILDERLEVEL;
		data.dict.appFieldDict = res.result.APPFIELD;
		data.dict.appTypeDict = res.result.APPTYPE;
	});
};
// 获取审核不通过的信息
const getNotPassInfo = () => {
	const data = Object.assign({}, info);
	if (Object.keys(data).length !== 0) {
		registerForm.form = Object.assign({}, info);
		registerForm.form.appAppendixListTemp = [] as Array<any>;
	}
};
</script>

<style scoped>
.steps-size {
	width: 660px;
	height: 250px;
}
.steps-content {
	/* margin-top: 16px; */
	border-radius: 6px;
	min-height: 200px;
	text-align: center;
	padding-top: 32px;
	display: flex;
	justify-content: center;
}
.steps-action {
	margin-top: 40px;
	display: flex;
	justify-content: flex-end;
}
[data-theme='dark'] .steps-content {
	background-color: #2f2f2f;
	border: 1px dashed #404040;
}
div /deep/ .el-upload-dragger {
	padding: 10px;
}
.card-box {
	margin: 50px 20px 20px 20px;
}
.register-body {
	height: calc(100vh - 114px);
	display: flex;
	justify-content: center;
	align-items: center;
	background: linear-gradient(200deg, #337ef7, #a9c1ed);
	border-radius: 20px;
}
.body-container {
	position: relative;
	z-index: 1;
	background-color: #fff;
	border-radius: 15px;
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 700px;
	box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
}
ul li {
	position: absolute;
	border: 1px solid #fff;
	background-color: #fff;
	width: 30px;
	height: 30px;
	list-style: none;
	opacity: 0;
}
.square li {
	top: 40vh;
	left: 60vw;
	animation: square 10s linear infinite;
}
.square li:nth-child(2) {
	top: 80vh;
	left: 10vw;
	animation-delay: 2s;
}
.square li:nth-child(3) {
	top: 80vh;
	left: 85vw;
	animation-delay: 4s;
}
.square li:nth-child(4) {
	top: 10vh;
	left: 70vw;
	animation-delay: 6s;
}
.square li:nth-child(5) {
	top: 10vh;
	left: 10vw;
	animation-delay: 8s;
}
.circle li {
	bottom: 0;
	left: 15vw;
	animation: circle 10s linear infinite;
}
.circle li:nth-child(2) {
	left: 35vw;
	animation-delay: 2s;
}
.circle li:nth-child(3) {
	left: 55vw;
	animation-delay: 6s;
}
.circle li:nth-child(4) {
	left: 75vw;
	animation-delay: 4s;
}
.circle li:nth-child(5) {
	left: 90vw;
	animation-delay: 8s;
}
@keyframes square {
	0% {
		transform: scale(0) rotateY(0deg);
		opacity: 1;
	}
	100% {
		transform: scale(5) rotateY(1000deg);
		opacity: 0;
	}
}
@keyframes circle {
	0% {
		transform: scale(0) rotateY(0deg);
		opacity: 1;
		bottom: 0;
		border-radius: 0;
	}
	100% {
		transform: scale(5) rotateY(1000deg);
		opacity: 0;
		bottom: 90vh;
		border-radius: 50%;
	}
}
.title {
	color: #1890ff;
	margin-left: 36px;
	margin-bottom: 28px;
}

.show-size {
	width: 78px;
	height: 32x;
	position: absolute;
	bottom: 15px;
}
</style>
